<template>
  <el-descriptions border>
    <el-descriptions-item
      label="Name"
      label-class-name="my-label"
      label-align="right"
      align="center"
    >
      {{ route?.name }}
    </el-descriptions-item>
    <el-descriptions-item
      label="分类"
      label-class-name="my-label"
      label-align="right"
      align="center"
    >
      {{ getDescriptionStr(findParentValues(sortTree, route?.sortId)) }}
    </el-descriptions-item>
    <el-descriptions-item
      label="Path"
      label-class-name="my-label"
      label-align="right"
      align="center"
    >
      {{ route?.path }}
    </el-descriptions-item>

    <el-descriptions-item
      label="Component"
      label-class-name="my-label"
      label-align="right"
      align="center"
    >
      {{ route?.component }}
    </el-descriptions-item>
    <el-descriptions-item
      label="ComponentPath"
      label-class-name="my-label"
      label-align="right"
      align="center"
    >
      {{ route?.componentPath }}
    </el-descriptions-item>
    <el-descriptions-item
      label="UpdateTime"
      label-class-name="my-label"
      label-align="right"
      align="center"
    >
      {{ route?.updateTime }}
    </el-descriptions-item>
  </el-descriptions>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useSortTreeStore } from '@/features/store/store'

const { sortTree } = storeToRefs(useSortTreeStore())
const { findParentValues, getDescriptionStr } = useSortTreeStore()

const props = defineProps({
  route: { type: Object as () => RouteItf, default: {} },
})

onMounted(() => {
  route.value = props.route
})

watch(
  () => props.route,
  () => (route.value = props.route)
)

const route = ref<RouteItf>(null)
</script>

<style lang="less" scoped>
:deep(.my-label) {
  background: #f0f9eb !important;
  font-weight: bold !important;
  color: #606266 !important;
}
</style>
